<template>
  <div style="height: 785px;" >

    <!--前台-消息页面   借贷进度&#45;&#45;审核中、审核未通过、打款中、打款成功、代还款、已还款、逾期未还font-size: 10px-->
    <el-row :gutter="0" style="background: white;margin: -20px;">
      <el-col :span="24" :offset="0">
        <div style="border-bottom: 1px solid #CCCCCC;margin-bottom: 10px"><h1>消息</h1></div>
      </el-col>
    </el-row>


    <el-row :span="8" v-for="(o, index) in form" :key="o" style="margin-top: 20px;text-align: left;font-size: 5px;">
      <el-col>

        <el-card :body-style="{ padding: '10px' }" >
          {{o.createTime}}/借{{o.loanAmount}}元/{{o.loanDuration}}个月
          <!--2020/11/02 借500.00元 3个月-->
          <el-row :gutter="0" style="border: 1px solid white;margin-top: 20px">
            <el-col :span="3" :offset="2" style="text-align: right">
              <div class="test">&nbsp;&nbsp; 审核中</div>
            </el-col>
            <el-col :span="3" :offset="0" style="text-align: left">
              <div class="test">审核未通过</div>
            </el-col>
            <el-col :span="3" :offset="0" style="text-align: left">
              <div class="test">&nbsp;&nbsp; 打款中</div>
            </el-col>
            <el-col :span="3" :offset="0" style="text-align: left">
              <div class="test">&nbsp;打款成功</div>
            </el-col>
            <el-col :span="3" :offset="0" style="text-align: left">
              <div class="test">&nbsp;&nbsp; 待还款</div>
            </el-col>
            <el-col :span="3" :offset="3" style="text-align: left">
              <div class="test">&nbsp;&nbsp; 已结清</div>
            </el-col>
          </el-row>

          <el-progress :percentage="o.percentage"  :color="customColorMethod" id="progressId" :status="statusVal"></el-progress><!--status="success warning"-->

          <el-row :gutter="0" style="border: 1px solid white;">
            <el-col :span="3" :offset="17" style="text-align: left">
              <div class="test">已逾期</div>
            </el-col>
          </el-row>

          <!--<div>
            <el-button-group>
              <el-button icon="el-icon-minus" @click="decrease"></el-button>
              <el-button icon="el-icon-plus" @click="increase"></el-button>
            </el-button-group>
          </div>-->

        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
    import axios from 'axios';
    export default {
      name: "message",
      data() {
        return {
          active: 0,
          percentage: 15,
          statusVal:'warning',
          number:1,
         form:[],
        };
      },
      methods: {
        customColorMethod(percentage) {
          if (percentage <= 17) {
            this.statusVal='warning';
            return '#909399';//灰色
          } else if (percentage < 32) {
            this.statusVal='warning';
            return '#e6a23c';//淡黄
          } else if (percentage < 46) {
            this.statusVal='warning';
            return '#6f7ad3';//紫
          }else if (percentage < 60) {
            this.statusVal='warning';
            return '#1989fa';//蓝
          }else if (percentage < 74) {
            this.statusVal='warning';
            return '#FF99CC';//粉
          }else if (percentage < 88) {
            this.statusVal='warning';
            return '#f56c6c';//淡红
          }else {
            this.statusVal='success';
            return '#5cb87a';//绿色
          }
        },
        /*increase() {
          this.percentage += 14.3;
          if (this.percentage > 100) {
            this.percentage = 100;
          }
          if (this.percentage > 95) {
            this.statusVal='success';
          }
        },
        decrease() {
          this.percentage -= 14.3;
          if (this.percentage < 0) {
            this.percentage = 0;
          }
          this.statusVal='';
        },*/
        findById(){
          axios.post("http://localhost:9999/credit-usermessage/findUsermessageById").then(res=>{
            //alert("666666")
            console.log(res.data)
            this.form=res.data.message;
          })
        }
      },
      mounted(){
          this.findById();
      }
    }
</script>

<style scoped>
  .test {
    width: 15px;
    font-size: 10px;
    word-wrap: break-word;
    letter-spacing: 10px;
    /*border:1px solid red;*/
  }
</style>
